<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>欢迎来到京东商城</title>
    <link rel="stylesheet" href="css/reset.1.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div id="hide">
        <div class="hide-con conment">
            <div class="hide-con-left">
                <a href="#" title="京东">
                 <h1>京东</h1>
                 </a>
            </div>
        <div class="hide-con-center">
        <form action="">
                <input type="text" placeholder="卷纸">
                <input type="submit" value="搜索">
        </form>
        </div>
            <div class="hide-con-right">
                 <a href="#">
                    <i class="icon six"></i>购物车
                    <span> 0 </span>件
                 </a>
        </div>                      
        </div>
    </div>
    <div id="back">
        ↑
	</div>
    <div id="head">
        <div class="head-con conment">
            <div class="head-con-left">
            <a href="#"><img src="images/2.png" alt="">
                江西 (选择省份)</a>        
              <ul>
                  <li><a href="#">北京</a></li>
                  <li><a href="#">上海</a></li>
                  <li><a href="#">深圳</a></li>
                  <li><a href="#">天津</a></li>
                  <li><a href="#">重庆</a></li>
                  <li><a href="#">香港</a></li>
                  <li><a href="#">澳门</a></li>
                  <li><a href="#">郑州</a></li>
                  <li><a href="#">武汉</a></li>
                  <li><a href="#">湖南</a></li>
                  <li><a class="jx" href="#">江西</a></li>
                  <li><a href="#">北京</a></li>
                  <li><a href="#">上海</a></li>
                  <li><a href="#">深圳</a></li>
                  <li><a href="#">天津</a></li>
                  <li><a href="#">重庆</a></li>
                  <li><a href="#">天津</a></li>
                  <li><a href="#">重庆</a></li>
                  <li><a href="#">香港</a></li>
                  <li><a href="#">澳门</a></li>
                  <li><a href="#">郑州</a></li>
                  <li><a href="#">武汉</a></li>
                  
              </ul>          
            </div>
            <div class="head-con-right">
                <div class="head-con-right-left">
                    <a href="login.html">你好,请登录</a>
                    <a href="reg.html">免费注册</a>
                </div>
                <ul>
                    <li class="bdr"><a href="#">我的订单</a></li>
                    <li class="bdr"><a href="#">我的京东
                        <i class="icon one"></i>
                    </a></li>
                    <li class="bdr"><a href="#">京东会员</a></li>
                    <li class="bdr"><a href="#">企业采购
                        <i class="icon one"></i>
                    </a></li>
                    <li class="bdr"><a href="#">客户服务
                        <i class="icon one"></i>
                    </a></li>
                    <li class="bdr"><a href="#">网站导航
                        <i class="icon one"></i>
                    </a></li>
                    <li class="bdr"><a href="#">手机京东</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="item">
        <div class="item-con conment">
            <div class="item-con-left">
                <a href="#" title="京东">
                    <h1>京东</h1>
                </a>
            </div>
            <div class="item-con-center">
                <form action="">
                    <input type="text" placeholder="美孚一号">
                    <input type="submit" value="搜索">
                </form>
                <div class="item-con-center-bottom">
                    <span>口罩及酒精:</span>
                    <a href="#">杀虫剂</a>
                    <a href="#">春茶</a>
                    <a href="#">安慕希</a>
                    <a href="#">房产</a>
                    <a href="#">每100-50</a>
                    <a href="#">200G专属</a>
                    <a href="#">家装节</a>
                    <a href="#">尖货手机</a>
                </div>
            </div>
            <div class="item-con-right">
                <a href="list.html">
                    <i class="icon six"></i>购物车
                    <span class="carNum"> 0 </span>件
                </a>
            </div>
            <div class="item-con-end">
               <a href="#">
                   <img src="images/5.png.webp" alt="">
                </a> 
            </div>
            <div class="item-con-last">
                <a href="#" class="red">秒杀</a>
                <a href="#" class="red">优惠券</a>
                <a href="#">PLUS会员</a>
                <a href="#">品牌闪购</a>
                <a href="#">拍卖</a>
                <a href="#">京东店家</a>
                <a href="#">京东超市</a>
                <a href="#">京东生鲜</a>
                <a href="#">京东国际</a>
                <a href="#">京东金融</a>
            </div>
        </div>
    </div>
    <div id="fixed">
        <a href="#"><img src="images/4.png" alt=""></a>
    </div>
    <div id="center">
        <div class="center-con conment">
            <div class="center-con-top">
              <div class="center-con-top-left">
                <ul>
                    <li><a class="dis" href="#">家用电器</a></li>
                    <li><a class="dis" href="#">电脑</a>/<a href="">办公</a></li> 
                    <li><a class="dis" href="#">电脑</a>/<a href="">办公</a></li> 
                    <li><a class="dis" href="#">电脑</a>/<a href="">办公</a></li> 
                    <li><a class="dis" href="#">电脑</a>/<a href="">办公</a></li> 
                    <li><a class="dis" href="#">电脑</a>/<a href="">办公</a></li> 
                    <li><a class="dis" href="#">电脑</a>/<a href="">办公</a></li> 
                    <li><a class="dis" href="#">电脑</a>/<a href="">办公</a></li> 
                    <li><a class="dis" href="#">电脑</a>/<a href="">办公</a></li> 
                    <li><a class="dis" href="#">电脑</a>/<a href="">办公</a></li> 
                    <li><a class="dis" href="#">电脑</a>/<a href="">办公</a></li> 
                    <li><a class="dis" href="#">电脑</a>/<a href="">办公</a></li> 
                    <li><a class="dis" href="#">电脑</a>/<a href="">办公</a></li> 
                    <li><a class="dis" href="#">电脑</a>/<a href="">办公</a></li> 
                    <li><a class="dis" href="#">电脑</a>/<a href="">办公</a></li> 
                    <li><a class="dis" href="#">电脑</a>/<a href="">办公</a></li> 
                    <li><a class="dis" href="#">电脑</a>/<a href="">办公</a></li>
                    <li><a class="dis" href="#">工业品</a></li>
                </ul>
            </div> 
              <div class="center-con-top-center">
                    <ul>
                        <li><a href="#"><img src="images/6.jpg.webp" alt="">
                        </a></li>
                        <li><a href="#">
                            <img src="images/7.jpg.webp" alt="">
                        </a></li>
                        <li><a href="3">
                            <img src="images/8.jpg.webp" alt="">
                        </a></li>
                        <li><a href="#">
                            <img src="images/9.jpg.webp" alt="">
                        </a></li>
                        <li><a href="#">
                            <img src="images/10.jpg.webp" alt="">
                        </a></li>
                    </ul>
                    <ol>
                    </ol>
                    <a href="script:;" class="leftBtn">＜</a>
                    <a href="script:;" class="rightBtn">＞</a>
            </div>
              <div class="center-con-top-right">
               <a href="#"><img src="images/1.jpg.webp" alt=""></a> 
               <a href="#"><img src="images/2.jpg.webp" alt=""></a>
               <a href="#"><img src="images/3.jpg.webp" alt=""></a>
            </div>
            <div class="center-con-top-last">
                <div class="center-con-top-last-top">
                    <p><a href="#"><img src="images/1.png" alt=""><span>hi~欢迎逛京东</span></a><br>
                    <a href="login.html">登陆</a> |<a href="reg.html">注册</a></p>
                </div>
                <div class="center-con-top-last-center">
                    <h3>京东快报</h3>
                    <p><a href="#"><span>最新</span> 为腕间增添一抹亮色...</a></p>
                    <p><a href="#"><span>热门</span> 烟灶套装测评：跟我...</a></p>
                    <p><a href="#"><span>热门</span> 冲奶粉不做这个个动作...</a></p>
                    <p><a href="#"><span>热评</span> 荣泰多功能家用按摩...</a></p>
                    <br>
                </div>
                <div class="center-con-top-last-bottom">
                    <a href="#">话费</a>
                    <a href="#">机票</a>
                    <a href="#">酒店</a>
                    <h5>优越品质 从京东开始</h5>
                   <img src="images/1.jpg" alt="">
                   
                </div>
                </div>
            </div>
            <div class="center-con-center">
                <div class="center-con-center-left">
                    <p>
                        <b>京东秒杀</b>
                    </p>
                    <div class="center-con-center-left-bottom">
                        <span>14:00 场</span>
                        <span>
                            <img src="images/5.png" alt="">
                        </span>
                        <span>距离结束还有</span>
                    </div>
                </div>
                <div class="center-con-center-center">
                    <ul>
                        <li>
                            <a href="list.html">
                            <img src="images/6.png" alt="">
                            </a>
                            <span>price:999$</span> <button>详情</button>
                    </li>
                        <li><a href="list.html">
                                <img src="images/7.png" alt="">
                        </a>
                        <span>price:999$</span> <button>详情</button>
                    </li>
                        <li><a href="list.html">
                                <img src="images/8.png" alt="">
                        </a>
                        <span>price:999$</span> <button>详情</button>
                    </li>
                        <li><a href="list.html">
                                <img src="images/9.png" alt="">
                        </a>
                        <span>price:999$</span> <button>详情</button>
                        </li>
                        <li><a href="list.html">
                                <img src="images/10.png" alt="">
                        </a>
                        <span>price:999$</span> <button>详情</button></li>
                    </ul>
                </div>
            </div>
            <div class="center-con-middle conment">
                <h3 style="color: firebrick; margin-top:20px;font-size: 16px;">猜你喜欢:</h3>
            </div>
            <div class="center-con-bottom" style="height:1650px">


            </div>
        </div>
    </div>
    <div id="foot">
        <div class="foot-con conment">
            <div class="foot-con-top">
                <ul>
                    <li style="padding-bottom: 15px;"><a class="th" href="#">关于京东</a></li>
                    <li><a href="#">我们是谁</a></li>
                    <li><a href="#">我们服务的客户</a></li>
                    <li><a href="#">我们的团队</a></li>
                    <li><a href="#">客户监护系统</a></li>
                 </ul>
                <ul>
                    <li style="padding-bottom: 15px;"><a class="th" href="#">京东案例</a></li>
                    <li><a href="#">我们是谁</a></li>
                    <li><a href="#">我们服务的客户</a></li>
                    <li><a href="#">我们的团队</a></li>
                    <li><a href="#">客户监护系统</a></li>
                </ul>
                 <ul>
                    <li style="padding-bottom: 15px;"><a class="th" href="#">京东服务</a></li>
                    <li><a href="#">我们是谁</a></li>
                    <li><a href="#">我们服务的客户</a></li>
                    <li><a href="#">我们的团队</a></li>
                    <li><a href="#">客户监护系统</a></li>
                </ul>
                <ul>
                    <li style="padding-bottom: 15px;"><a class="th" href="#"> &nbsp;</a></li>
                    <li><a href="#">我们是谁</a></li>
                    <li><a href="#">我们服务的客户</a></li>
                    <li><a href="#">我们的团队</a></li>
                    <li><a href="#">客户监护系统</a></li>
                </ul>
                <ul>
                    <li style="padding-bottom: 15px;"><a class="th" href="#">京东动态</a></li>
                    <li><a href="#">我们是谁</a></li>
                    <li><a href="#">我们服务的客户</a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                </ul>
                <ul>
                     <li style="padding-bottom: 15px;"><a class="th" href="#">联们我们</a></li>
                     <li><a href="#"><img src="images/ws3_75.jpg" alt=""> &nbsp;<img src="images/ws2_77.jpg" alt=""></a></li>
                     <li><a href="#">&nbsp;</a></li>
                     <li><a  style="color: white" href="#">400-008-0408</a></li>
                     <li><a href="#">服务热线</a></li>
                </ul>
            </div>
            <div class="foot-con-bottom">
                 Copyright 2007-2016 webthink.cc 版权所有 京东有限科技(北京有限公司) 京Icp备000000号
            </div>
        </div>
    </div>
</body>
<script src="js/move.js"></script>
<script src="js/page.js"></script>
<script src="js/promiseAjax.js"></script>
<script src="js/cookie.js"></script>
<script>
var usename=getCookie("usename");
if(usename){
    var data=localStorage.getItem("data");
    if(data){
        data=JSON.parse(data);
        var numArr=data.map(function(v){
            return v.number;
        });
        var sum=numArr.reduce(function(a,b){
            return a+b;
        })
        document.querySelector(".carNum").innerText=sum;
    }else{
        document.querySelector(".carNum").innerText=sum;
    }
    }

</script>
<script>
var timerId;
window.onscroll = function(){
var top = document.body.scrollTop || document.documentElement.scrollTop;
if(top >= 582){
			hide.style.height = '110px';
			hide.style.top = '0';
		}else{
			hide.style.height = '0';
			hide.style.top = '-110px';
		}
		if(top >= 582){
			back.style.display = 'block';
		}else{
			back.style.display = 'none';
		}
		if(top == 0){
			clearInterval(timerId);
		}
	}
back.onclick = function(){
var speed = document.body.scrollTop || document.documentElement.scrollTop;
timerId = setInterval(function(){
	speed -= 20;
	document.body.scrollTop = speed;
	document.documentElement.scrollTop = speed;
		},50);
	}
</script>
<script>
function Carousel(classname){
    this.box = document.querySelector("."+classname);
    this.ul = this.box.querySelector("ul");
    this.ol = this.box.querySelector("ol");
    this.leftBtn = this.box.querySelector("a.leftBtn");
    this.rightBtn = this.box.querySelector("a.rightBtn");
    this.first = this.ul.children[0];
    this.index = 1;
    this.timer = null;
    this.flag = true;
}
Carousel.prototype.init = function(){
    this.createDot();
    this.handleUl();
    this.rightBtn.onclick=()=>{
        this.rightClick();
    }
    this.leftBtn.onclick = ()=>{
        this.leftClick();
    }
    this.auto();
    this.box.onmouseover=()=>{
        this.over();
    }
    this.box.onmouseout=()=>{
        this.auto();
    }
    for(let i=0;i<this.ol.children.length;i++){
        this.ol.children[i].onclick=()=>{
            this.dotClick(i);
        }
    }
}
Carousel.prototype.slider = function(){
    this.flag = false;
    var _this = this;
    move(this.ul,{
        left:-this.index*this.first.offsetWidth
    },function(){
        if(_this.index==_this.ul.children.length-1){
            _this.index=1;
            _this.ul.style.left = -_this.index*_this.first.offsetWidth + "px"
        }
        if(_this.index==0){
            _this.index=_this.ul.children.length-2;
            _this.ul.style.left = -_this.index*_this.first.offsetWidth + "px"
        }
        for(var i=0;i<_this.ol.children.length;i++){
            _this.ol.children[i].className = '';
        }
        _this.ol.children[_this.index-1].className = "active";
        _this.flag = true;
    });
}
Carousel.prototype.dotClick = function(i){
    if(!this.flag){
        return;
    }
    this.index = i+1;
    this.slider();
}
Carousel.prototype.over = function(){
    clearInterval(this.timer);
}
Carousel.prototype.auto = function(){
    this.timer = setInterval(()=>{
        if(!this.flag){
            return;
        }
        this.index++;
        this.slider();
    },3000);
}
Carousel.prototype.leftClick = function(){
    if(!this.flag){
        return
    }
    this.index--;
    this.slider();
}
Carousel.prototype.rightClick = function(){
    if(!this.flag){
        return
    }
    this.index++;
    this.slider();
}
Carousel.prototype.handleUl = function(){
    var first = this.first.cloneNode(true);
    var last = this.ul.children[this.ul.children.length-1].cloneNode(true);
    this.ul.appendChild(first);
    this.ul.insertBefore(last,this.ul.children[0]);
    this.ul.style.width = first.offsetWidth * this.ul.children.length + "px";
    this.ul.style.position = "absolute"
    this.ul.style.left = -first.offsetWidth + "px"
}
Carousel.prototype.createDot = function(){
    for(var i=0;i<this.ul.children.length;i++){
        var li = document.createElement("li");
        this.ol.appendChild(li);
    }
    this.ol.style.width = this.ol.children[0].offsetWidth * this.ol.children.length * 2 + "px";
    this.ol.children[this.index-1].className = "active"
}
var lunbo = new Carousel("center-con-top-center");
lunbo.init();
</script>
<script>
      pAjax({
        url:"php/list.php",
    }).then(function(res){
        var total=res.length;
        var pageSize=36;
        new Page({
            pageData:{
                total:total,
                pageSize:pageSize
            },
            language:{
                first:"首页",
                previous:"上一页",
                next:"下一页",
                last:"尾页"
            }
        },function(currentPage){
            var str='';
            var arr=res.slice((currentPage-1)*pageSize,currentPage*pageSize);
            for(var i=0;i<arr.length;i++){
           str+=`
           <div class="photo" style="float:left;margin:20px 25px 0px 33px; width:140px;height:238px;">
                <div class="thumbnail">
                    <img style="height:140px" src="${arr[i].imgpath}">
                <div class="caption">
                     <h3>${arr[i].name}</h3>
                    <p><a href="details.html?id=${arr[i].id}" class="btn btn-primary" role="button" style="color:white;background:skyblue;border-radius:15px;">查看详情</a></p>
                </div>
                </div>
            </div>         
           `
       }
       document.querySelector(".center-con-bottom").innerHTML=str;
        })
    })
</script>
</html>